﻿<?xml version="1.0" encoding="UTF-8" ?>
<!-- 
    This file is part of Microsoft Robotics Developer Studio Code Samples.
    Copyright (C) Microsoft Corporation.  All rights reserved.
    $File: ColorV2.xslt $ $Revision: 1 $
-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:c="http://schemas.microsoft.com/robotics/2009/12/hitechnic/nxt/colorv2sensor.html">
  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:call-template name="MasterPage">
      <xsl:with-param name="title">
        <xsl:text>HiTechnic Color Sensor V2 - </xsl:text>
        <xsl:value-of select="/c:ColorV2SensorState/c:Name"/>
      </xsl:with-param>
      <xsl:with-param name="serviceName">
        HiTechnic Color Sensor V2
      </xsl:with-param>
      <xsl:with-param name="description">
        Status of a HiTechnic Color Sensor V2.
      </xsl:with-param>
      <xsl:with-param name="head">
        <script language="javascript" type="text/javascript" src="/resources/HiTechnicSensors.Y2009.M12/Microsoft.Robotics.Services.Sample.HiTechnic.Transforms.Common.js"/>
        <script language="javascript" type="text/javascript">
          <xsl:text>var pollingFrequency = </xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:PollingFrequencyMs"/>
          <xsl:text>;</xsl:text>
          <xsl:text>var timeStamp = "</xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:Reading/c:TimeStamp"/>
          <xsl:text>";</xsl:text>
          <xsl:text>var color = </xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:Reading/c:ColorNumber"/>
          <xsl:text>;</xsl:text>
          <xsl:text>var Red = </xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:Reading/c:Red"/>
          <xsl:text>;</xsl:text>
          <xsl:text>var Green = </xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:Reading/c:Green"/>
          <xsl:text>;</xsl:text>
          <xsl:text>var Blue = </xsl:text>
          <xsl:value-of select="/c:ColorV2SensorState/c:Reading/c:Blue"/>
          <xsl:text>;</xsl:text>

          <![CDATA[

var firstTime = true;

function onState(state)
{
    if (state.Reading.TimeStamp != timeStamp || firstTime)
    {
      firstTime = false;
      timeStamp = state.Reading.TimeStamp;
      
      for (var key in state.Reading)
      {
        var cell = document.all(key);
        if (cell != null)
        {
          cell.innerText = state.Reading[key];
        }
      }

      setNewTarget(state.Reading.Red, state.Reading.Green, state.Reading.Blue);

      if (color != parseInt(state.Reading.ColorNumber))
      {
        color = parseInt(state.Reading.ColorNumber);
      }
    }

    readState(pollingFrequency);
}

function startPolling()
{
  setStateCompletion("onState");
  readState(pollingFrequency);
}

var RGB = "#000000";
var hD="0123456789ABCDEF";

function MakeRGB(d)
{
  var h = hD.substr(d&15,1);
  for (i=0;i<5;i++)
  {
    d >>= 4;
    h = hD.substr(d&15,1) + h;
  }
  RGB = "#" + h;
}

function setNewTarget(R, G, B)
{
    Red = parseInt(R);
    Green = parseInt(G);
    Blue = parseInt(B);
    var decColor = Blue + 256 * Green + 65536 * Red;
    MakeRGB(decColor);
    document.getElementById("ColorPatch").style.backgroundColor = RGB;
    document.getElementById("Color").innerText = RGB;
}

setTimeout("startPolling()", 1000);

          ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!--<xsl:output method="html"/>-->

  <xsl:template match="/c:ColorV2SensorState">
    <img src="/resources/HiTechnicSensors.Y2009.M12/Microsoft.Robotics.Services.Sample.HiTechnic.Resources.HiTechnicColorV2Sensor.Image.png"
         align="right" alt="Buttons" width="32px" height="32px"/>
    <table>
      <tr class="even">
        <th width="30%">Name:</th>
        <td width="70%">
          <xsl:value-of select="c:Name"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Connection:</th>
        <td>
          <xsl:choose>
            <xsl:when test="c:Connected = 'true'">
              Connected
            </xsl:when>
            <xsl:otherwise>
              Not connected
            </xsl:otherwise>
          </xsl:choose>
          <xsl:text> on </xsl:text>
          <xsl:value-of select="c:SensorPort"/>
        </td>
      </tr>
      <tr class="even">
        <th>Polling Frequency:</th>
        <td id="PollingFrequencyMs">
          <xsl:value-of select="c:PollingFrequencyMs"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Mode:</th>
        <td id="Mode">
          <xsl:value-of select="c:Mode"/>
        </td>
      </tr>
      <tr class="even">
        <th>Frequency Cancellation:</th>
        <td id="FrequencyCancellation">
          <xsl:value-of select="c:FrequencyCancellation"/>
        </td>
      </tr>
      <tr class="odd">
        <th>LED Power:</th>
        <td id="LedPower">
          <xsl:value-of select="c:LedPower"/>
        </td>
      </tr>
      <tr class="even">
        <th>Detection Range:</th>
        <td id="DetectionRange">
          <xsl:value-of select="c:DetectionRange"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Color Number:</th>
        <td id="ColorNumber">
          <xsl:value-of select="c:Reading/c:ColorNumber"/>
        </td>
      </tr>
      <tr class="even">
        <th>Red:</th>
        <td id="Red">
          <xsl:value-of select="c:Reading/c:Red"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Green:</th>
        <td id="Green">
          <xsl:value-of select="c:Reading/c:Green"/>
        </td>
      </tr>
      <tr class="even">
        <th>Blue:</th>
        <td id="Blue">
          <xsl:value-of select="c:Reading/c:Blue"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Timestamp:</th>
        <td id="TimeStamp">
          <xsl:value-of select="c:Reading/c:TimeStamp"/>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div style="background:white;">
            <div id="Color"></div>
            <div id="ColorPatch" style="width:64px;height:64px;border:1px;">
            </div>
          </div>
        </td>
      </tr>
    </table>
    <br/>
    Color Numbers range from 0 (Black) to 17 (White). RGB values are from 0 to 255.
    <br/>
    <br/>
  </xsl:template>
</xsl:stylesheet>